<template>
  <a-modal
    :visible="visible"
    :title="formData.id ? '编辑权限' : '新增权限'"
    @cancel="handleCancel"
    @ok="handleSubmit"
    :confirmLoading="loading"
  >
    <a-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 16 }"
    >
      <a-form-item label="权限名称" name="permissionName">
        <a-input v-model:value="formData.permissionName" placeholder="请输入权限名称" />
      </a-form-item>
      <a-form-item label="权限编码" name="permissionCode">
        <a-input v-model:value="formData.permissionCode" placeholder="请输入权限编码" />
      </a-form-item>
      <a-form-item label="权限类型" name="permissionType">
        <a-select v-model:value="formData.permissionType" placeholder="请选择权限类型">
          <a-select-option value="MENU">菜单</a-select-option>
          <a-select-option value="BUTTON">按钮</a-select-option>
          <a-select-option value="API">接口</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="状态" name="status">
        <a-radio-group v-model:value="formData.status">
          <a-radio :value="1">启用</a-radio>
          <a-radio :value="0">禁用</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="排序" name="sort">
        <a-input-number v-model:value="formData.sort" :min="0" :max="999" />
      </a-form-item>
      <a-form-item label="备注" name="remark">
        <a-textarea v-model:value="formData.remark" placeholder="请输入备注" :rows="4" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { message } from 'ant-design-vue'
import type { FormInstance } from 'ant-design-vue'
import { createPermission, updatePermission } from '@/api/system/permission'
import type { PermissionInfo } from '@/types/system/permission.type'

const props = defineProps<{
  visible: boolean
  formData: Partial<PermissionInfo>
  parentId?: number | null
}>()

const emit = defineEmits<{
  (e: 'update:visible', visible: boolean): void
  (e: 'success'): void
}>()

const formRef = ref<FormInstance>()
const loading = ref(false)

// 表单数据
const form = reactive<Partial<PermissionInfo>>({
  permissionName: '',
  permissionCode: '',
  permissionType: 'MENU',
  status: 1,
  sort: 0,
  remark: ''
})

// 表单校验规则
const rules = {
  permissionName: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
  permissionCode: [{ required: true, message: '请输入权限编码', trigger: 'blur' }],
  permissionType: [{ required: true, message: '请选择权限类型', trigger: 'change' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
}

// 监听表单数据变化
watch(
  () => props.formData,
  (newVal) => {
    Object.assign(form, newVal)
  },
  { immediate: true }
)

// 取消
const handleCancel = () => {
  emit('update:visible', false)
  formRef.value?.resetFields()
}

// 提交
const handleSubmit = async () => {
  try {
    await formRef.value?.validate()
    loading.value = true
    
    const data = {
      ...form,
      parentId: props.parentId
    }
    
    if (data.id) {
      await updatePermission(data)
      message.success('更新成功')
    } else {
      await createPermission(data)
      message.success('创建成功')
    }
    
    emit('success')
    handleCancel()
  } catch (error) {
    console.error('提交失败:', error)
    message.error('提交失败')
  } finally {
    loading.value = false
  }
}
</script> 